<template>
    <div class="column-detail-page w-75 mx-auto">
        <div class="column-info row mb-4 border-bottom pb-4 align-items-center" v-if="column">
        <div class="col-3 text-center">
            <img :src="column.avatar && column.avatar.fitUrl" :alt="column.title" class="rounded-circle border w-100">
        </div>
        <div class="col-9">
            <h4>{{column.title}}</h4>
            <p class="text-muted">{{column.description}}</p>
        </div>
        </div>
        <post-list :list="list"></post-list>
  </div>
</template>
<script lang="ts">
import { testData, testPosts } from '@/testData'
import {defineComponent, onMounted} from 'vue'
import {useRoute} from 'vue-router'
import PostList from '../components/PostList.vue'
import {useStore} from 'vuex'
export default defineComponent({
    name:'ColumnDetail',
    components:{PostList},
    setup(){
        const route=useRoute()
        const store=useStore()
        const currentId=+route.params.id  //字符串转化成数字
        //查找c.id等于currentId的对象,返回的是一个对象
        const column=testData.find(c=>c.id===currentId)
         //查找c.id等于currentId的对象,返回的是一个数组
        const list=testPosts.filter(post=>post.columnId===currentId)
        onMounted(()=>{
            store.dispatch('fetchColumn',currentId)
            store.dispatch('fetchPosts',currentId)
        })
        return {
            route,
            column,
            list
        }
    }
})
</script>